import React, {Component} from 'react'
import {TabBar} from 'antd-mobile'
import PropTypes from 'prop-types'
import {withRouter} from 'react-router-dom'

const Item = TabBar.Item;

class NavFooter extends Component {

  static propTypes = {
    navList: PropTypes.array.isRequired,
    unReadCount:PropTypes.number.isRequired
  };


  render() {

    let {navList,unReadCount} = this.props;

    // 过滤被隐藏的的路由对象
    navList = navList.filter(nav => !nav.hide);

    const path = this.props.location.pathname;
    return(
      <TabBar>
        {
          navList.map((nav) => (
              <Item key={nav.path}
                    badge={nav.path === '/message' ? unReadCount : 0}
                    title={nav.text}
                    icon={{uri:require(`./images/${nav.icon}.png`)}}
                    selectedIcon={{uri:require(`./images/${nav.icon}-active.png`)}}
                    selected={nav.path === path}
                    onPress={() => this.props.history.replace(nav.path)}
              />
              )
          )
        }
      </TabBar>
    )
  }
}

export default withRouter(NavFooter) //向外暴露withRouter()包装产生的组件